<template>
  <div class="box" @touchmove="onMove3">
    {{ 1 + 1 }}
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import gsap from '../../libs/gsap-3.11.1.min.js'
import Favico from 'favico.js'
export default {
  data() {
    return {}
  },
  methods: {
    onMove1() {
      console.log(`move1`)
    },
    onMove2() {
      console.log(`move2`)
    },
    onMove3() {
      console.log(`move3`)
    },
    add() {
      var favicon = new Favico({
        animation: 'none',
        dataUrl: (url) => {
          console.log(url)
        }
      })

      favicon.badge(1)
      console.log(`helloworld`)
      gsap.to('.box', 1, {
        x: 100,
        y: 100
      })

      class Test {
        constructor() {
          this.list = []
        }
        do(something) {
          this.list.push(something)
          //const next = () => {
          //this.isLock = false
          //this.next()
          //}
          //this.list.push(() => {
          //something(next)
          //})
          //this.next()
          this.next()
        }
        next() {
          if (!this.isLock) {
            let fn = this.list.shift()
            if (fn) {
              this.isLock = true
              fn(() => {
                this.isLock = false
                this.next()
              })
            }
          }
        }
      }

      let t = new Test()
      t.do((next) => {
        console.log(1)
        setTimeout(() => {
          next()
        }, 1e3)
      })

      t.do((next) => {
        console.log(2)
        setTimeout(() => {
          next()
        }, 1e3)
      })

      t.do((next) => {
        console.log(3)
        setTimeout(() => {
          next()
        }, 1e3)
      })
      t.do((next) => {
        console.log(4)
      })
      //10 -> 100
      //100 -> 200
      //
      //110,90
      //90 -> 40 //自己
      //90 -> 50 //
    }
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: #fff;
}
</style>
